<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>企业管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        .layui-card-header {
            font-size: 16px;
            font-weight: bold;
            padding: 15px;
            border-bottom: 1px solid #f6f6f6;
        }
        .layui-card-body {
            padding: 15px;
        }

        .search-container {
            margin-bottom: 15px;
        }

        .action-container {
            margin-bottom: 20px;
        }

        .table-container {
            margin-top: 10px;
        }

        #addCompanyBtn {
            margin-left: 0;
        }
    </style>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-header">企业管理</div>
    <div class="layui-card-body">
        <!-- 搜索区域 -->
        <div class="search-container">
            <form class="layui-form" id="searchForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">企业名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="companyName" placeholder="请输入企业名称" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit lay-filter="searchBtn">
                            <i class="layui-icon layui-icon-search"></i>搜索
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">
                            <i class="layui-icon layui-icon-refresh"></i>重置
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 添加按钮区域-->
        <div class="action-container">
            <button class="layui-btn layui-btn-normal" id="addCompanyBtn">
                <i class="layui-icon layui-icon-add-1"></i>添加企业
            </button>
        </div>

        <!-- 表格区域 -->
        <div class="table-container">
            <table id="companyTable" lay-filter="companyTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tableOperation">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>

<!-- 编辑表单模板 -->
<script type="text/html" id="editFormTpl">
    <form class="layui-form" lay-filter="editForm" style="padding: 20px;">
        <input type="hidden" name="id" value="{{ d.id }}">
        <div class="layui-form-item">
            <label class="layui-form-label">企业名称</label>
            <div class="layui-input-block">
                <input type="text" name="companyName" value="{{ d.companyName || '' }}" placeholder="请输入企业名称" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">企业类型</label>
            <div class="layui-input-block">
                <input type="text" name="companyType" value="{{ d.companyType || '' }}" placeholder="请输入企业类型" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">法人代表</label>
            <div class="layui-input-block">
                <input type="text" name="legalPerson" value="{{ d.legalPerson || '' }}" placeholder="请输入法人代表" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">企业地址</label>
            <div class="layui-input-block">
                <input type="text" name="companyAddress" value="{{ d.companyAddress || '' }}" placeholder="请输入企业地址" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">企业状态</label>
            <div class="layui-input-block">
                <input type="text" name="companyStatus" value="{{ d.companyStatus || '' }}" placeholder="请输入企业状态" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">信用代码</label>
            <div class="layui-input-block">
                <input type="text" name="creditNo" value="{{ d.creditNo || '' }}" placeholder="请输入信用代码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submitEdit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</script>

<!-- 添加表单模板 -->
<script type="text/html" id="addFormTpl">
    <form class="layui-form" lay-filter="addForm" style="padding: 20px;">
        <div class="layui-form-item">
            <label class="layui-form-label">企业名称(全称)</label>
            <div class="layui-input-block">
                <input type="text" name="companyName" placeholder="请输入企业名称" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submitAdd">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</script>

<script src="/layui/layui.js"></script>
<script th:inline="none">
    layui.use(['table', 'form', 'layer', 'laytpl'], function(){
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var laytpl = layui.laytpl;
        var $ = layui.$;

        // 初始化表格
        var tableIns = table.render({
            elem: '#companyTable',
            url: '/api/company/list',
            method: 'get',
            page: true,
            limit: 10,
            limits: [10, 20, 30, 50],
            loading: true,
            even: true,
            request: {
                pageName: 'page',
                limitName: 'size'
            },
            response: {
                statusName: 'code',
                statusCode: 200,
                countName: 'count',
                dataName: 'data'
            },
            cols: [[
                {field: 'id', title: 'ID', width: 80, sort: true},
                {field: 'companyName', title: '企业名称', width: 250},
                {field: 'companyType', title: '企业类型', width: 120},
                {field: 'legalPerson', title: '法人代表', width: 100},
                {field: 'companyAddress', title: '企业地址', width: 300},
                {field: 'companyStatus', title: '企业状态', width: 100,
                    templet: function(d){
                        var status = d.companyStatus || '';
                        var color = status === '存续' ? 'green' : 'orange';
                        return '<span class="layui-badge layui-bg-'+color+'">'+status+'</span>';
                    }
                },
                {field: 'establishTime', title: '成立时间', width: 120,
                    templet: function(d){
                        if(!d.establishTime) return '';
                        var date = new Date(d.establishTime);
                        return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();
                    }
                },
                {field: 'creditNo', title: '信用代码', width: 200},
                {fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#tableOperation'}
            ]]
        });

        // 添加按钮点击事件
        $('#addCompanyBtn').on('click', function(){
            var addHtml = $('#addFormTpl').html();
            var addIndex = layer.open({
                title: '添加企业',
                type: 1,
                area: ['600px', '500px'],
                content: addHtml,
                success: function() {
                    form.render();
                }
            });

            // 提交添加表单
            form.on('submit(submitAdd)', function(formData){
                $.ajax({
                    url: '/api/company/add',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(formData.field),
                    success: function(res) {
                        if(res.code === 200){
                            layer.close(addIndex);
                            layer.msg('添加成功', {icon: 1});
                            tableIns.reload();
                        }else {
                            layer.msg(res.msg, {icon: 2})
                        }
                    },
                    error: function() {
                        layer.msg("异常", {icon: 2});
                    }
                });
                return false;
            });
        });

        // 搜索按钮点击事件
        form.on('submit(searchBtn)', function (data) {
            tableIns.reload({
                where: {
                    companyName: data.field.companyName
                },
                page: {curr: 1}
            });
            return false;
        });

        // 表格工具栏事件
        table.on('tool(companyTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'detail') {
                // 显示企业详情
                layer.open({
                    title: '企业详情 - ' + data.companyName,
                    type: 1,
                    area: ['700px', '500px'],
                    content: '<div class="layui-card" style="margin:0;">'+
                        '<div class="layui-card-body" style="padding:20px;">'+
                        '<div class="layui-row layui-col-space15">'+
                        '<div class="layui-col-md6">'+
                        '<p><strong>企业名称：</strong>'+ (data.companyName || '') +'</p>'+
                        '<p><strong>企业类型：</strong>'+ (data.companyType || '') +'</p>'+
                        '<p><strong>法人代表：</strong>'+ (data.legalPerson || '') +'</p>'+
                        '</div><div class="layui-col-md6">'+
                        '<p><strong>企业状态：</strong><span class="layui-badge layui-bg-green">'+ (data.companyStatus || '') +'</span></p>'+
                        '<p><strong>成立时间：</strong>'+ (data.establishTime ? new Date(data.establishTime).toLocaleDateString() : '') +'</p>'+
                        '<p><strong>信用代码：</strong>'+ (data.creditNo || '') +'</p>'+
                        '</div><div class="layui-col-md12">'+
                        '<p><strong>企业地址：</strong>'+ (data.companyAddress || '') +'</p>'+
                        '</div></div></div></div>'
                });
            } else if (layEvent === 'edit') {
                // 编辑逻辑
                var editHtml = laytpl($('#editFormTpl').html()).render(data);
                var editIndex = layer.open({
                    title: '编辑企业 - ' + data.companyName,
                    type: 1,
                    area: ['600px', '500px'],
                    content: editHtml,
                    success: function() {
                        form.render();
                    }
                });

                // 提交编辑表单
                form.on('submit(submitEdit)', function(formData) {
                    $.ajax({
                        url: '/api/company/update',
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify(formData.field),
                        success: function() {
                            layer.close(editIndex);
                            layer.msg('编辑成功', {icon: 1});
                            tableIns.reload();
                        },
                        error: function() {
                            layer.msg('编辑失败', {icon: 2});
                        }
                    });
                    return false;
                });
            } else if (layEvent === 'delete') {
                // 删除逻辑
                layer.confirm('确定要删除该企业吗？', {icon: 3, title:'删除确认'}, function(index){
                    $.ajax({
                        url: '/api/company/delete/' + data.id,
                        type: 'POST',
                        success: function() {
                            layer.msg('删除成功', {icon: 1});
                            tableIns.reload();
                        },
                        error: function() {
                            layer.msg('删除失败', {icon: 2});
                        }
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>
</body>
</html>